<template>
    <div class="zong">
        <Top/>
        <Inswipe class="ban"/>
        <ul class="Slike" v-for="(item,index) in txt" :key="index" @click="tonew()">
                <li class="Sliketop">
                    <i class="Sliketopline"></i>
                    <span class="Slikew">{{item}}</span>
                    <i class="Sliketopline"></i>
                </li>
                <li>
                     <img class="tu" :src="tu[index]" alt="">
                    <ul class="Slikemain" >
                <li v-for="(item,index) in like[index]" :key="index">
                    <template v-if="index==0">
                        <div >
                    <img :src="item.src" alt="">
                  </div>
                  <div>
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>
                    </template>
                    <template v-if="index>0">
                        <div class="Sline">
                      <img :src="item.src" alt="">
                    </div>
                  <div>
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>
                    </template>

                </li>
              </ul> 
              </li>
        </ul> 
            
            
        
        <ul class="Slike">
          <li class="Sliketop">
                <i class="Sliketopline"></i>
                <span class="Slikew">猜你喜欢</span>
                <i class="Sliketopline"></i>
          </li>
          <li>
            <!-- 二维数组 -->
            <ul class="Slikemain1 sfone" >
                <li class="Smw1" v-for="(item,index) in foods.slice(0,2)" :key="index">
                    <template v-if="index<2">
                        <div >
                            <img class="Smi" :src="item.src" alt="">
                        </div>
                        <div class="Smizi">
                            {{item.name}}
                        </div>
                        <div class="Sfred">
                            ￥{{item.money}}
                        </div>
                
                    </template>
                  </li> 
                  <template v-if="jia">
                       <li  class="Smw1" v-for="(item,index) in foods.slice(2)" :key="index">
                    <template>
                        <div >
                            <img class="Smi" :src="item.src" alt="">
                        </div>
                        <div class="Smizi">
                            {{item.name}}
                        </div>
                        <div class="Sfred">
                            ￥{{item.money}}
                        </div>
                
                    </template>
                  </li>  
                  </template> 
                 
            </ul>
            </li> 
          <li class="SMbot">
            <a class="Sjiazai" href="###" @click="change1()" v-if="!jia">加载更多</a>
            <a class="Sjiazai" v-if="jia" href="###" @click="change1()">亲，已经到底了哦</a>
          </li>
        </ul>
        <Footer/>
    </div>
</template>

<script>
import Top from '../ma/Top';
import Inswipe from '../ma/Inswipe';
import Footer from '../ma/footer';
// import Meizhuang from '../ma/Meizhuang';

export default {
    name:'Milk',
    components:{
        Top,
        Inswipe,
        Footer,
        // Meizhuang
    },
    data(){
        return{
            tu:[require('../../assets/user/milk1.png'),require('../../assets/user/milk3.png')],
            // 猜你喜欢
        like:[
            [
                {
            src:require('../../assets/user/milk2.png'),
            zi:'不易脱妆口红',
            money:59
        },
        {
            src:require('../../assets/user/milk2.png'),
            zi:'花蕊唇彩',
            money:129
        },
        {
            src:require('../../assets/user/milk2.png'),
            zi:'娇吻玉口红',
            money:88
        }
            ],
            [
                {
            src:require('../../assets/user/milk4.png'),
            zi:'不易脱妆口红',
            money:59
        },
        {
            src:require('../../assets/user/milk4.png'),
            zi:'花蕊唇彩',
            money:129
        },
        {
            src:require('../../assets/user/milk4.png'),
            zi:'娇吻玉口红',
            money:88
        }
            ]
            
        ],
        txt:['奶粉专区','纸尿裤专区'],
        foods:[
            {
                src:require('../../assets/user/food5.png'),
                name:'野生蓝莓果汁饮料',
                money:100
            },
            {
                src:require('../../assets/user/food6.png'),
                name:'原味坚果',
                money:99
            },
            {
                src:require('../../assets/user/food5.png'),
                name:'野生蓝莓果汁饮料',
                money:100
            },
            {
                src:require('../../assets/user/food6.png'),
                name:'原味坚果',
                money:99
            },
            {
                src:require('../../assets/user/food5.png'),
                name:'野生蓝莓果汁饮料',
                money:100
            },
            {
                src:require('../../assets/user/food6.png'),
                name:'原味坚果',
                money:99
            }
        ],
        jia:false,
        }
    },
    methods:{
        change1(){
        this.jia = !this.jia;
      },
      tonew(){
          this.$router.replace('/new');
      }
    }
    
}
</script>

<style scoped>
.zong {
    font-size: 2.4rem;
}
.ban {
    position: relative;
    margin: 15rem 0 2rem 0;
}
.Imaintop {
    background: #fff;
    border-bottom: 1px solid #ccc;
    text-align: left;
    font-size: 3rem;
    height: 6rem;
    line-height: 6rem;
}
.wp {
    padding: 0 2rem;
    color: #4d4d4d;
}
.ImtOne {
    padding-left: 4rem;
    background: url(../../assets/user/xiaolaba.png) no-repeat 0 0.5rem;
    margin-right: 2rem;
}
.ImTwo {
    background: url(../../assets/user/rili.png) no-repeat 0 0.5rem;
}
.Imainbottom {
    height: 29.9rem;
    border-bottom: 1px solid #ccc;
    background: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2.4rem;
    margin-bottom: 1.9rem;
}
.Imbleft {
    padding-top: 7.2rem;
}
.ImL {
    position: relative;
}
.Imbtop {
    position: absolute;
    top: 1.4rem;
    background: #e53e42;
    color: #fff;
    height: 4rem;
    line-height: 4rem;
    width: 11rem;
    text-align: center;
}
.Imline {
    height: 28rem;
    border: 1px solid #ccc;
}
.Imainr {
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: relative;
}
.Imrl {
    writing-mode: vertical-rl;
    font-size: 2.4rem;
    color: #f15779;
    margin-right: 6.7rem;
    display: inline-block;
    letter-spacing: 0.5rem;
}
/* 下边框 */
.bd {
    border-bottom: 1px solid #ccc;
    width: 37rem;
    position: absolute;
    top: 14rem;
    margin-left: -2.5rem;
}
/* 猜你喜欢 */
.Slike {
    margin-top: -0.5rem;
    background: #fff;
    font-size: 2.4rem;
    color: #4d4d4d;
    padding:1.5rem 2rem 2.3rem 2rem;
    border-bottom: 1px solid #ccc;
}
.Slikemain {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Slikered {
    color: #e83d41;
}
.Sline {
  height: 16rem;
  width: 0;
  border-left: 0.2rem solid #ccc;
  padding-left: 5.9rem;
  margin-left: -8rem;
}
.tu {
    width: 100%;
    height: 100%;
}
.tu1 {
    margin-top: 2rem;
    border-top: 1px solid #ccc;
}
.Slike {
  background: #fff;
  font-size: 2.4rem;
  margin-top: 2rem;
  /* border: 1px solid #cccccc; */
  color: #4d4d4d;
}
.Sliketop {
  font-size: 3rem;
  padding: 1.2rem 0 2.5rem 0;
}
.Sliketopline {
  display: inline-block;
  width: 6rem;
  border: 1px solid #cccccc;
  vertical-align: middle;
}
.Slikew {
  display: inline-block;
  margin: 0 1.5rem;
}
.sfone {
    background: #fff;
}
.Sfred {
    color: #e53e42;
}
.Slikemain1 {
  display: flex;
  justify-content: space-evenly;
  padding: 2.5rem 0;
  flex-wrap: wrap;
}
.Smw1 {
    width: 32.8rem;
    height: 23.8rem;
    border: 0.1rem solid #ccc;
    position: relative;
    margin-bottom: 2rem;
}
.SMbot {
    height: 20rem;
}
.Sjiazai {
  color: #808080;
}
</style>